import React, { useState, useEffect } from 'react';

//第一步:  在当前函数组件中获取store仓库数据
import { useDispatch, useSelector } from 'react-redux';
// 第二步: 导入定义好的派发的action 任务
import { addcountactioAsync, addcountaction, addmoneyaction, getschoollist } from '../../../store3-module/actions/action'

const Father = () => {
    // useSelector 语法: const redux仓库数据 = useSelector((仓库state数据) => { return 仓库state数据 })
    // const state = useSelector((state) => { return { reducer: state.reducer } })
    const { reducer, reducer1, reducer2 } = useSelector(state => state)
    // console.log('state', state);

    // 定义当前组件自身的state 数据
    const [step, setStep] = useState(10)

    // 创建dispatch 方法
    const dispatch = useDispatch();
    // addCount 方法定义:
    const addCount = () => {
        // 派发修改任务
        dispatch(addcountaction(step))
    }

    // 初始化请求数据 学校列表 
    useEffect(() => {
        // 派发异步任务
        dispatch(getschoollist())
    }, [])

    return (
        <div>
            <p>函数组件中操作redux 仓库数据</p>
            <p>count:{reducer.count} </p>
            <p><button onClick={addCount}>count+10 同步</button></p>
            <p><button onClick={() => dispatch(addcountactioAsync(5))}>count+5 异步</button></p>
            {/* 展示学校数据 */}
            <ul>
                {reducer2.schoolArr.map((item) => {
                    return <li key={item.id}>{item.school_name}</li>
                })}
            </ul>

        </div>
    );
}

export default Father;
